<template>
  <div class="c-bg-sgray">
    <div :class="fromType == 'promoter' ? 'chain-bg1' : 'chain-bg2'" class="theme-bg-gradient18000 c-pt40 c-ph24">
      <div class="c-flex-row">
        <img class="c-ww100 c-hh100 c-brp50 c-bd2-white" :src="$addXossFilter(chainUserInfo.headimgurl, require('@/assets/defult_head.png'))" alt="">
        <div class="c-w0 c-flex-grow1 c-ml20 c-fc-white">
          <div class="c-flex-row c-aligni-center c-flexw-wrap">
            <div id="nameWrap" :class="fromType == 'promoter' ? 'c-mt8' : 'c-mb16'" class="c-fs30 c-fw500 c-text-ellipsis1 c-mr12">{{chainUserInfo.nickname}}</div>
            <div class="c-flex-row c-aligni-center c-flex-shrink0 c-flexw-wrap c-maxw">
              <!-- <div class="c-flex-row c-aligni-center c-mr10">
                <img :src="$addXossFilter(chainUserInfo.userType == 1 ? require('../../../../public/i/wap/memberIndex/normalVip.png') : chainUserInfo.userType == 10 ? require('../../../../public/i/wap/memberIndex/mbvip.png') : require('../../../../public/i/wap/memberIndex/mbAgent.png'), require('@/assets/defult_head.png'))" alt="" class="c-ww50 imgCloseBig c-p c-inlineblack c-vcAlign-middle">
                <div :class="chainUserInfo.userType == 1 ? 'c-bg-f2 c-fc-sblack' : chainUserInfo.userType == 10 ? 'c-mbIndexBg2 c-fc-xlblown' : 'c-mbIndexBg1 c-fc-white'" class="c-maxw242 c-fs18 c-text-ellipsis1 c-pr10 c-ml-22 c-pl28 c-lh-n c-pl10 c-textAlign-c c-br16 c-pv2 c-flex-row c-aligni-center">
                  {{chainConf.arrTypeName && chainConf.arrTypeName[chainUserInfo.userType] ? chainConf.arrTypeName[chainUserInfo.userType] : chainUserInfo.userType == 30 ? '合伙人' : chainUserInfo.userType == 20 ? '代理' : chainUserInfo.userType == 10 ? '会员' : '普通用户'}}
                </div>
              </div> -->
              <div v-if="fromType != 'promoter'" v-for="(item, index) in userTypeList" :key="index" class="c-fs18 c-fc-white c-ph10 c-br20 c-hh30 c-lh32 c-mbIndexBg1 c-mr10 c-mb16">{{item.userTypeName}}</div>
              <div v-if="fromType == 'promoter' && custNameMap[chainUserInfo.vipType]" class="c-fs18 c-fc-white c-ph10 c-br20 c-hh30 c-lh32 c-mbIndexBg1 c-mt8">{{custNameMap[`${chainUserInfo.vipType}`]}}</div>
            </div>
            <!-- <identity-com class="c-flex-shrink0 c-ml8" :vipType="3"></identity-com> -->
          </div>
          <template v-if="fromType == 'promoter'">
            <!-- <div class="c-flex-row">
              <div class="c-fs18 c-fc-white c-ph10 c-br20 c-hh30 c-lh32 c-mbIndexBg1" v-if="custNameMap[chainUserInfo.vipType]">{{custNameMap[`${chainUserInfo.vipType}`]}}</div>
            </div> -->
            <div class="c-fs22 c-fc-white c-mt20">推荐人：{{chainUserInfo.rNickname ? chainUserInfo.rNickname : '- -'}}</div>
          </template>
          <template v-if="fromType != 'promoter'">
            <div class="c-flex-row c-aligni-center">
              <div class="c-fs22 c-fc-white">ID：{{chainUserInfo.userId}}</div>
              <div class="c-ww64 c-hh28 c-flex-row c-flex-center c-br14 c-fc-white c-bd1-ccc c-ml8 c-fs20" @click="copyText(chainUserInfo.userId)">复制</div>
            </div>
            <div class="c-fs22 c-fc-white c-mt16">升级时间：{{chainUserInfo.addAt}}</div>
            <div class="c-fs22 c-fc-white c-mt16">有效期：长期有效</div>
          </template>
        </div>
      </div>
      <div v-if="fromType == 'promoter'" class="c-flex-row c-flexw-wrap c-pt24 c-pb24 c-br20 c-bg-white c-mt40 c-p">
        <div class="width-scope c-flex-grow1 c-flex-column c-flex-center">
          <div class="c-fs32 c-ws-n c-fc-xblack c-fw600">{{unFreezeMoney}}</div>
          <div class="c-fs24 c-fc-gray c-mt12">已结算</div>
        </div>
        <div class="width-scope c-flex-grow1 c-flex-column c-flex-center">
          <div class="c-fs32 c-ws-n c-fc-xblack c-fw600">{{freezeMoney}}</div>
          <div class="c-fs24 c-fc-gray c-mt12">待结算</div>
        </div>
        <div class="width-scope c-flex-grow1 c-flex-column c-flex-center">
          <div class="c-fs32 c-ws-n c-fc-xblack c-fw600">{{refereeNum}}</div>
          <div class="c-fs24 c-fc-gray c-mt12">累计直推用户</div>
        </div>
      </div>
      <div v-else class="c-flex-row c-flexw-wrap c-pt24 c-pb24 c-br20 c-bg-white c-mt40 c-p">
        <div @click="goPromoteIncome" class="width-scope c-flex-grow1 c-flex-column c-flex-center">
          <div class="c-fs32 c-ws-n c-fc-xblack c-fw600">{{Number(chainUserInfo.promoteIncome).toFixed(2)}}</div>
          <div class="c-fs24 c-fc-gray c-mt12">推广收益<span class="iconfont c-fs16 c-ml4">&#xe908;</span></div>
        </div>
        <div @click="goBonus" class="width-scope c-flex-grow1 c-flex-column c-flex-center">
          <div class="c-fs32 c-ws-n c-fc-xblack c-fw600">{{Number(chainUserInfo.bonusIncome).toFixed(2)}}</div>
          <div class="c-fs24 c-fc-gray c-mt12">分红收益<span class="iconfont c-fs16 c-ml4">&#xe908;</span></div>
        </div>
      </div>
      <template v-if="fromType == 'promoter'">
        <div class="c-bg-white c-ph22 c-pt28 c-mt16 c-br16">
          <div class="c-fs24 c-fc-xblack c-fw500 c-pb8">我的业绩</div>
          <div @click="goMyClassmate" class="c-pv28 c-flex-row c-aligni-center">
            <div class="iconfont c-fs28 c-fc-xblack">&#xe709;</div>
            <div class="c-fs24 c-fc-xblack c-w0 c-flex-grow1 c-ml22">推广用户</div>
            <div class="iconfont c-fs16 c-fc-gray">&#xe60e;</div>
          </div>
          <div v-if="!isHiddenAgent" @click="goIncome" class="c-pv28 c-flex-row c-aligni-center c-bd-t1">
            <div class="iconfont c-fs28 c-fc-xblack">&#xe67e;</div>
            <div class="c-fs24 c-fc-xblack c-w0 c-flex-grow1 c-ml22">我的奖励</div>
            <div class="iconfont c-fs16 c-fc-gray">&#xe60e;</div>
          </div>
        </div>
        <div class="c-bg-white c-ph22 c-pt28 c-mt16 c-br16">
          <div class="c-fs24 c-fc-xblack c-fw500 c-pb8">推广中心</div>
          <div @click="goClassmateSpread" class="c-pv28 c-flex-row c-aligni-center">
            <div class="iconfont c-fs28 c-fc-xblack">&#xe8bd;</div>
            <div class="c-fs24 c-fc-xblack c-w0 c-flex-grow1 c-ml22">推广商品</div>
            <div class="iconfont c-fs16 c-fc-gray">&#xe60e;</div>
          </div>
          <div v-if="!isFaShou" @click="goRelatedIncomeProds" class="c-pv28 c-flex-row c-aligni-center c-bd-t1">
            <div class="iconfont c-fs28 c-fc-xblack">&#xe89f;</div>
            <div class="c-fs24 c-fc-xblack c-w0 c-flex-grow1 c-ml22">关联商品</div>
            <div class="iconfont c-fs16 c-fc-gray">&#xe60e;</div>
          </div>
          <!-- <div v-if="!isFaShou && enableSaleClue == 1" @click="tapGoShopList" class="c-pv28 c-flex-row c-aligni-center c-bd-t1">
            <div class="iconfont c-fs28 c-fc-xblack">&#xe86e;</div>
            <div class="c-fs24 c-fc-xblack c-w0 c-flex-grow1 c-ml22">销售线索</div>
            <div class="iconfont c-fs16 c-fc-gray">&#xe60e;</div>
          </div> -->
        </div>
        <div v-if="(!isFaShou && enableSaleClue == 1) || showRankList" class="c-bg-white c-ph22 c-pt28 c-mt16 c-br16">
          <div class="c-fs24 c-fc-xblack c-fw500 c-pb8">激励工具</div>
          <div v-if="!isFaShou && enableSaleClue == 1" @click="tapGoShopList" class="c-pv28 c-flex-row c-aligni-center">
            <div class="iconfont c-fs28 c-fc-xblack">&#xe86e;</div>
            <div class="c-fs24 c-fc-xblack c-w0 c-flex-grow1 c-ml22">销售线索</div>
            <div class="iconfont c-fs16 c-fc-gray">&#xe60e;</div>
          </div>
          <div v-if="showRankList" @click="goRankList" class="c-pv28 c-flex-row c-aligni-center c-bd-t1">
            <div class="iconfont c-fs28 c-fc-xblack">&#xe731;</div>
            <div class="c-fs24 c-fc-xblack c-w0 c-flex-grow1 c-ml22">推广员排行榜</div>
            <div class="iconfont c-fs16 c-fc-gray">&#xe60e;</div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="c-bg-white c-ph22 c-pt28 c-mt16 c-br16">
          <div class="c-fs24 c-fc-xblack c-fw500 c-pb8">我的工具</div>
          <div @click="goMyTeam" class="c-pv28 c-flex-row c-aligni-center">
            <div class="iconfont c-fs28 c-fc-xblack">&#xe6f5;</div>
            <div class="c-fs24 c-fc-xblack c-w0 c-flex-grow1 c-ml22">我的团队</div>
            <div class="iconfont c-fs16 c-fc-gray">&#xe60e;</div>
          </div>
          <div @click="goSpread" class="c-pv28 c-flex-row c-aligni-center c-bd-t1">
            <div class="iconfont c-fs28 c-fc-xblack">&#xe711;</div>
            <div class="c-fs24 c-fc-xblack c-w0 c-flex-grow1 c-ml22">推广中心</div>
            <div class="iconfont c-fs16 c-fc-gray">&#xe60e;</div>
          </div>
          <div v-if="chainConf.enableCityManager" @click="goAreaAgent" class="c-pv28 c-flex-row c-aligni-center c-bd-t1">
            <div class="iconfont c-fs28 c-fc-xblack">&#xe6e8;</div>
            <div class="c-fs24 c-fc-xblack c-w0 c-flex-grow1 c-ml22">城市经理</div>
            <div class="iconfont c-fs16 c-fc-gray">&#xe60e;</div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js"
export default {
  name: 'chainInfo',
  components: {
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      chainUserInfo: '',
      chainConf: '',
      userTypeList: [],
      fromType: '',
      custNameMap: {},
      freezeMoney: 0,
      unFreezeMoney: 0,
      refereeNum: 0,
      enableSaleClue: 0, //是否开启销售线索 1开启 0关闭
      isHiddenAgent: true,
      isFaShou: localStorage.getItem('isFaShou') == 1,
      showRankList: false
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    goMyClassmate() {
      this.$routerGo(this, "push", { path: "/member/classmates/classmatesIndex" });
    },
    goIncome() {
      this.$routerGo(this, "push", { path: "/member/classmates/promoteIncomeList" });
    },
    goRelatedIncomeProds() {
      this.$routerGo(this, "push", { path: "/member/classmates/relatedIncomeProds" });
    },
    tapGoShopList() {
      this.$routerGo(this, "push", { path: "/homePage/agent/shopAnalysisList" });
    },
    goRankList() {
      this.$routerGo(this, "push", { path: "/member/classmates/rankingList" });
    },
    goClassmateSpread() {
      this.$routerGo(this, "push", { path: "/homePage/spread/SpreadMoney" });
    },
    copyText(id) {
      utilJs.copyText(id);
    },
    goPromoteIncome() {
      this.$routerGo(this, "push", { path: "/member/scholarship/scholarshipIndex" });
    },
    goBonus() {
      this.$routerGo(this, "push", { path: "/homePage/agent/chainBonus" });
    },
    goMyTeam() {
      this.$routerGo(this, "push", { path: "/homePage/agent/chainTeamMember" });
    },
    goSpread() {
      this.$routerGo(this, "push", { path: "/homePage/agent/chainSpreadMoney" });
    },
    goAreaAgent() {
      if (this.chainUserInfo.isApplyCityManage == 1) {
        this.$routerGo(this, "push", { path: "/homePage/newAreaUser/applyRecords", query: {'comeFrom': 4} });
      } else {
        this.$routerGo(this, "push", { path: "/homePage/newAreaUser/apply", query: {'comeFrom': 4} });
      }
    },
    goMicroPage(mId) {
      this.$routerGo(this, "push", { path: "/homePage/microPage/microPage", query: {'mId': mId, 'isPromotedAccount': 1} });
    },
    getChainConf() {
      return new Promise((resolve, reject) => {
        utilJs.getMethod(global.apiurl + 'chain/getChainConf', res => {
          this.chainConf = res;
          setDocumentTitle(this.chainConf && this.chainConf.confName.name ? this.chainConf.confName.name : "链动2+1");// eslint-disable-line
          resolve()
        }, failRes => {
          reject(failRes)
        })
      })
    },
    getPromoterConf() {
      return new Promise((resolve, reject) => {
        utilJs.getMethod(global.apiurl + 'Analyse/getRankSetting', res => {
          this.showRankList = res.userRankSettings && res.userRankSettings.isOpen == 1;
          resolve()
        }, failRes => {
          reject(failRes)
        })
      })
    },
    getChainUserInfo() {
      utilJs.getMethod(global.apiurl + 'chainUser/getChainUserInfo', res => {
        if (JSON.stringify(res) === '[]') {
          this.$routerGo(this, "replace", { path: "/" });
          return
        }
        this.chainUserInfo = res;
        this.userTypeList = this.chainUserInfo.userTypeList ? this.chainUserInfo.userTypeList : [];
        this.userTypeList = this.userTypeList.filter(item => {
          return !(
            ((item.userType == 30 || item.userType == 31) && this.chainConf.enablePartner != 1) ||
            ((item.userType == 40 || item.userType == 41) && this.chainConf.enableCityManager != 1) ||
            ((item.userType == 50 || item.userType == 51) && this.chainConf.enableCEO != 1)
          )
        })
      })
    },
    getPromoterInfo() {
      utilJs.getMethod(global.apiurl + 'promote/userOverview', res => {
        if (JSON.stringify(res) === '[]') {
          this.$routerGo(this, "replace", { path: "/" });
          return
        }
        this.chainUserInfo = res && res.userInfo ? res.userInfo : '';
        this.freezeMoney = res.freezeMoney;
        this.unFreezeMoney = res.unFreezeMoney;
        this.refereeNum = res.refereeNum;
        this.enableSaleClue = res.enableSaleClue;
      })
    },
    //分享
    wechatShare: function () {
      // let title = this.chainConf && this.chainConf.confName.name ? this.chainConf.confName.name : "链动2+1";
      // let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      // utilJs.wechatConfig(shareUrl, title, "", "", function () { });
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      // let title = this.chainConf && this.chainConf.confName.name ? this.chainConf.confName.name : "链动2+1";
      // let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      // utilJs.appShareTrue(title, "", shareUrl, "");
      utilJs.appShareTrue("", "", "", "");
    }
  },
  activated() {
    this.fromType = this.$route.query.fromType || '';
    this.custNameMap = utilJs.getCustNameMap();
    let companyId = localStorage.getItem('companyId') || '';
    //谷晟阳和测试环境老鹰这个商家隐藏推广收益、团队管理，我的团队，团队业绩相关
    const HIDDEN_COMPANY_LIST = ['99yw', '8rxm'];
    this.isHiddenAgent = HIDDEN_COMPANY_LIST.includes(companyId);
    if (this.fromType == 'promoter') {
      setDocumentTitle("推广员");// eslint-disable-line
      this.getPromoterConf();
      this.getPromoterInfo();
    } else {
      this.getChainConf().then(() => {
        this.getChainUserInfo();
      });
    }
    this.wechatShare();
  },
  deactivated() {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chain-bg1 {
  background-repeat: no-repeat;
  background-size: 100% 10rem;
}
.chain-bg2 {
  background-repeat: no-repeat;
  background-size: 100% 12rem;
}
.income-bg {
  background-image: linear-gradient(135deg, #FFF0E4 0%, #FDDFC8 13%, #F9D7BB 100%);
}
.bd-inner {
  height: 1.6rem;
  width: 1px;
  top: 0.7rem;
  left: 50%;
  border-left: 1px solid #999;
}
.width-scope {
  min-width: 33%;
  max-width: 50%;
}
</style>
